// 主色调
$primary-gradient: linear-gradient(45deg, #409EFF, #36cfc9);
$secondary-gradient: linear-gradient(45deg, #ff6b6b, #feca57);

// 阴影效果
$card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
$hover-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);

// 圆角
$border-radius-base: 8px;
$border-radius-large: 12px;
$border-radius-circle: 50%;

// 动画
$transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
$transition-smooth: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);

// 间距
$spacing-mini: 4px;
$spacing-small: 8px;
$spacing-base: 16px;
$spacing-large: 24px;
$spacing-huge: 32px;

// 字体
$font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
  'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
  'Noto Color Emoji';

// 断点
$breakpoint-xs: 576px;
$breakpoint-sm: 768px;
$breakpoint-md: 992px;
$breakpoint-lg: 1200px;
$breakpoint-xl: 1920px;

// 最小宽度限制
$min-width: 768px;

// 自定义混入
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@mixin card-style {
  background: white;
  border-radius: $border-radius-large;
  box-shadow: $card-shadow;
  transition: $transition-base;
  
  &:hover {
    box-shadow: $hover-shadow;
    transform: translateY(-2px);
  }
}

@mixin text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 响应式混入
@mixin respond-to($breakpoint) {
  @if $breakpoint == xs {
    @media (max-width: $breakpoint-xs) {
      @content;
    }
  } @else if $breakpoint == sm {
    @media (max-width: $breakpoint-sm) {
      @content;
    }
  } @else if $breakpoint == md {
    @media (max-width: $breakpoint-md) {
      @content;
    }
  } @else if $breakpoint == lg {
    @media (max-width: $breakpoint-lg) {
      @content;
    }
  } @else if $breakpoint == xl {
    @media (max-width: $breakpoint-xl) {
      @content;
    }
  }
}

// Element Plus 主题覆盖
:root {
  --el-color-primary: #409EFF;
  --el-border-radius-base: #{$border-radius-base};
  --el-font-family: #{$font-family};
}

// 全局样式重置
body {
  font-family: $font-family;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
  background-color: #f5f7fa;
}

// 全局响应式样式
html, body {
  overflow-x: hidden;
  min-width: $min-width;
}

// 页面通用容器样式
.page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: $spacing-huge;
  min-width: $min-width;
  
  @include respond-to(sm) {
    padding: $spacing-base;
  }
}

// 响应式图片
img {
  max-width: 100%;
  height: auto;
}

// 响应式表格
.el-table {
  width: 100%;
  overflow-x: auto;
}

// 全局动画类
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 0.3s ease;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(10px);
  opacity: 0;
} 